<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>读取.gdb</title>
    <!-- 导入Element CSS -->
    <link rel="stylesheet" href="../js/lib/element/element.css">
    <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
    <style>
        html,body,#app, #map{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .tb {
            position: absolute;
            top: 10px;
            right: 50px;
            z-index:1001;
            padding: 5px 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="map"></div>
    <el-table class="tb" :data="tableData" style="width: 800px">
        <el-table-column prop="name" label="行政区划名称">
        </el-table-column>
        <el-table-column prop="ha" label="治理河岸长度（km）">
        </el-table-column>
        <el-table-column prop="zlgc" label="治理工程量（km）">
        </el-table-column>
    </el-table>
</div>
</body>
<!-- 导入Vue Element axios ol-->
<script src="../js/lib/vue2/vue.js"></script>
<script src="../js/lib/element/element.js"></script>
<script src="../js/lib/axios/axios.js"></script>
<script src="../js/lib/ol4.6.4/ol.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData:[],
                map:null
            }
        },
        created(){
            this.initMap()
        },
        methods: {
            async initMap(){
                await this.getTableData()
                const layers = await this.getLayers()
                let map = new ol.Map({
                    layers: [],
                    // 设置显示地图的视图
                    view: new ol.View({
                        projection: 'EPSG:3857',
                        center: [1.2894645034200002E7, 3470216.539300002], // 定义地图显示中心
                        zoom: 11,
                    }),
                    target: "map", //存放地图的容器
                });
                this.map = map
                layers.forEach(layer=>{
                    this.addFeature(layer)
                })
            },
            async getTableData(){
                const res = await axios.get("/gdb/calculate")
                if (res.data.status === 0)
                    this.tableData = res.data.data
            },
            async getLayers(){
                const res = await axios.get("/gdb/layers")
                if (res.data.status === 0)
                    return res.data.data.reverse()
            },
            addFeature(layer){
                let geoJson = {
                    "type": "FeatureCollection",
                    "features":layer.features.map(item => JSON.parse(item.geometry))
                }
                let features = (new ol.format.GeoJSON()).readFeatures(geoJson);
                let style
                switch (layer.name) {
                    case "治理工程":
                        style = new ol.style.Style({
                            // 设置线颜色\宽度
                            stroke: new ol.style.Stroke({
                                width: 1,
                                color: "#ff0000"
                            })
                        })
                        break;
                    case "行政区划":
                        style = new ol.style.Style({
                            // 设置线颜色\宽度
                            stroke: new ol.style.Stroke({
                                width: 1,
                                color: "#565454"
                            }),
                            // 图形区域内颜色
                            fill: new ol.style.Fill({
                                color: "#e1e1e1"
                            })
                        })
                        break;
                    case "河岸":
                        style = new ol.style.Style({
                            // 设置线颜色\宽度
                            stroke: new ol.style.Stroke({
                                width: 1,
                                color: "#0070ff"
                            })
                        });
                        break;

                }
                let vectorSource = new ol.source.Vector({
                    features: features
                });
                let vector = new ol.layer.Vector({
                    source: vectorSource,
                    style: style,
                    renderMode:"vector"
                });
                this.map.addLayer(vector);
            }
        },

    })

</script>
</html>